<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠面板</title>
<style>
  .panel {
    overflow: hidden;
    max-height: 0;
    background-color: pink;
    transition: max-height 0.2s ease-out;
  }
  .panel.active {
    max-height: 500px; /* 可根据需要调整最大高度 */
  }
</style>
</head>
<body>

<button id="toggleBtn">展开</button>
<div class="panel" id="panel">
  <p>这里是折叠面板的内容，可以添加任何内容。</p>
</div>
<h1>Hello</h1>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const panel = document.getElementById('panel');

  toggleBtn.addEventListener('click', function() {
    if (panel.classList.contains('active')) {
      panel.classList.remove('active');
      toggleBtn.innerText = '展开';
    } else {
      panel.classList.add('active');
      toggleBtn.innerText = '收起';
    }
  });
</script>

</body>
</html>